<form id="<?php echo $uniqid;?>" method="post" style="padding: 8px;">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF" v-if="params.id>0">
            <td colspan="4">
                <div style="float:right">
                    <span class="l-btn l-btn-small color9 table" @click="memberTeams"><span class="l-btn-text">团队{{params.child_user_count}}人</span></span>
                    <span class="l-btn l-btn-small color9 table" @click="memberSuperior"><span class="l-btn-text">查看上级</span></span>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >用户头像：</td>
            <td class="main">
                <div title="上传图片" style="display: flex; height: 80px; overflow: hidden;">
                    <div class="img-box" v-if="params.avatar">
                        <a class="linkWrapper" target="_blank" :href="params.avatar" title="查看原图">
                            <img height="70px" :src="params.avatar+'?imageView2/1/w/100/h/100'"></a>
                        <div class="img-box-del" @click="params.avatar=''">
                            <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                        </div>
                    </div>
                    <div class="add-image-button" v-else>
                        <a class="btn btn-default btn-lg" @click="uploadBox('memberrewardeditVm.params.avatar')" href="javascript:void(0);">
                            <i class="iconfont icon-tianjia"></i>
                        </a>
                    </div>
                </div>
            </td>
            <td class="tlabel"  width="10%">推荐人：</td>
            <td width="40%">
                <div  style="display: flex; align-items: center;justify-content: space-between;">
                    <div>
                    <div style="display: flex; flex-direction: column;" v-if="params.parent_member_id>0 && params.parent">
                        <a v-if="params.parent.avatar" class="linkWrapper" target="_blank" :href="params.parent.avatar" title="查看原图">
                        <img height="30px" :src="params.parent.avatar+'?imageView2/1/w/100/h/100'"></a>
                        <div style="text-align: center;line-height: 20px;">
                            <p>(ID：{{ params.parent.id }})</p>
                            <p>{{ params.parent.nickname }}</p>
                        </div>
                    </div>
                    <div v-else>
                        暂无
                    </div>
                    </div>
                    <div>
                        <div v-if="params.id>0" class="l-btn l-btn-small color9 table" @click="changeParent" style="margin:5px 10px"><span class="l-btn-text">更换推荐人</span></div>
                        <div v-if="params.parent_member_id>0" class="l-btn l-btn-small color9 table" @click="cleanParent"  style="margin:5px 10px"><span class="l-btn-text">清空推荐人</span></div>
                    </div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >手机号：<span style="color: red">*</span></td>
            <td><input type="text" class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入手机号.."  v-model="params.phone">
            </td>
            <td class="tlabel"  width="10%">会员ID：</td>
            <td width="40%">
                <div style="display: flex; justify-content: space-between">
                <span>{{ params.id }}</span>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel"  width="10%">会员昵称：<span style="color: red">*</span></td>
            <td width="40%"><input type="text" style="width: 130px;"
                                   class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                   placeholder="请输入昵称.." required="true" v-model="params.nickname">
                <label><input name="gender" type="radio" class="textbox-prompt" v-model="params.gender" value="1">先生</label>
                <label><input name="gender" type="radio" class="textbox-prompt" v-model="params.gender" value="0">女士</label>
            </td>
            <td class="tlabel" >账户余额：</td>
            <td>
                <div style="display: flex; align-items: center;justify-content: space-between;">
                <span style="width: 120px;">{{ params.money }}</span>
                <span class="l-btn l-btn-small color9 table" @click="recharge('money')" v-if="params.id>0"><span class="l-btn-text">充值</span></span>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >会员等级：</td>
            <td>
                <div  style="display: flex; align-items: center;">
                    <span style="margin-right: 20px;">{{ params.level_info ? params.level_info.name : '粉丝' }}</span>
                    <span v-if="params.id>0" class="l-btn l-btn-small color9 table" @click="changeLevel"><span class="l-btn-text">更换等级</span></span>
                </div>
            </td>
            <td class="tlabel" >账户积分：</td>
            <td>
                <div style="display: flex; align-items: center;justify-content: space-between;">
                <span style="width: 120px;">{{ params.score }}</span>
                <span class="l-btn l-btn-small color9 table" @click="recharge('score')" v-if="params.id>0"><span class="l-btn-text">充值</span></span>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >升级锁定：</td>
            <td>
                <el-checkbox-group v-model="params.upgrade_lock">
                    <el-checkbox :true-label="1" :false-label="0">禁止升级</el-checkbox>
                </el-checkbox-group>
            </td>
            <td class="tlabel" >降级锁定：</td>
            <td>
                <el-checkbox-group v-model="params.demotion_lock">
                    <el-checkbox :true-label="1" :false-label="0">禁止降级</el-checkbox>
                </el-checkbox-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >生日：</td>
            <td><input type="text"
                       class="forminput inputstyle validatebox-text easyui-validatebox easyui-datebox membersedit-birthday"
                       v-model="params.birthday"></td>
            <td class="tlabel" >登陆IP：</td>
            <td>
                {{ params.logined_ip }}
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >邮箱：</td>
            <td><input type="text"
                       class="forminput inputstyle validatebox-text easyui-validatebox"
                       v-model="params.email"></td>
            <td class="tlabel" >登陆次数：</td>
            <td>
                {{ params.login_times }}
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel"  width="10%">登陆密码：</td>
            <td width="40%"><input type="text" class="forminput inputstyle validatebox-text textbox-prompt"
                                   placeholder="无需修改请留空.."  v-model="params.resetPwd"></td>
            </td>
            <td class="tlabel" >上次登录：</td>
            <td>
                {{ params.logined_at }}
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel"  width="10%">支付密码：</td>
            <td width="40%"><input type="text" class="forminput inputstyle validatebox-text textbox-prompt"
                                   placeholder="无需修改请留空.."  v-model="params.resetPayPwd"></td>
            </td>
            <td class="tlabel" >加入时间：</td>
            <td>
                {{ params.created_at }}
            </td>
        </tr>

        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >状态：</td>
            <td colspan="3">
                <el-radio-group v-model="params.status">
                    <el-radio label="normal">正常</el-radio>
                    <el-radio label="lock">锁定</el-radio>
                    <el-radio label="frozen">冻结</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="params.id>0">
            <td class="tlabel" >是否股东：</td>
            <td colspan="3">
                <div>
                    <div v-if="params.gudong">
                        <span style="display: inline-block; color: green; padding:0 30px">是</span>
                        <span style="display: inline-block; ">成为股东时间: {{params.gudong.created_at}}</span>
                    </div>
                    <div class="display-flex" style="align-items: flex-start" v-else>
                        <span style="display: inline-block; color: red; padding:0 30px">否</span>
                        <div>
                            <span class="l-btn l-btn-small color9 table" @click="setGudong"><span class="l-btn-text">设置为股东</span></span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF"v-if="params.id>0">
            <td class="tlabel" >是否推客：</td>
            <td colspan="3">
                <div v-if="params.tuike">
                    <span style="display: inline-block; color: green; padding:0 30px">{{ params.tuike.level }} 级推客</span>
                </div>
                <div class="display-flex" style="align-items: flex-start" v-else>
                    <span style="display: inline-block; color: red; padding:0 30px">否</span>
                    <div>
                        <span class="l-btn l-btn-small color9 table" @click="setTuike"><span class="l-btn-text">设置为推客</span></span>
                    </div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="params.id>0">
            <td class="tlabel" >是否区域经销商：</td>
            <td colspan="3">
                <div v-if="params.qudai">
                    <span style="display: inline-block; color: green; padding:0 30px">{{ params.qudai.area_name }} 区域代理商</span>
                </div>
                <div class="display-flex" style="align-items: flex-start" v-else>
                    <span style="display: inline-block; color: red; padding:0 30px">否</span>
                    <div>
                        <span class="l-btn l-btn-small color9 table" @click="setQudai"><span class="l-btn-text">设置为区域经销商</span></span>
                    </div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF"v-if="params.id>0">
            <td class="tlabel" >是否推广大使：</td>
            <td colspan="3">
                <div v-if="params.twostage">
                    <span style="display: inline-block; color: green; padding:0 30px">{{ params.twostage.level }} 级推广大使</span>
                </div>
                <div class="display-flex" style="align-items: flex-start" v-else>
                    <span style="display: inline-block; color: red; padding:0 30px">否</span>
                    <div>
                        <span class="l-btn l-btn-small color9 table" @click="setTwostage"><span class="l-btn-text">设置为推广大使</span></span>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</form>
<div id="memberrewardeditDlg" class="easyui-dialog" style="width:540px; height:540px;" title="信息框" closed="true"></div>

<script>
    var memberrewardeditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            is_gudong: '',
            gudong_remark: '',
        },
        created(){
            this.init();
        },
        computed:{
            gudong_changed(){
                return parseInt(this.params.is_gudong) !== parseInt(this.is_gudong);
            }
        },
        methods: {
            init(){
                this.is_gudong = this.params.is_gudong;
            },
            memberTeams(){
                $("#memberrewardeditDlg").dialog({
                    title: memberrewardeditVm.params.nickname + '-团队信息',
                    closed: false,
                    width: 940,
                    height: 560,
                    cache: false,
                    href: '/admin/member/team?id=' + memberrewardeditVm.params.id + '&name=' + memberrewardeditVm.params.nickname,
                    modal: true,
                    buttons: [{
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#memberrewardeditDlg").dialog('close');
                        }
                    }]
                });
            },
            memberSuperior(){
                let name = memberrewardeditVm.params.nickname;
                let rowId = memberrewardeditVm.params.id;
                if (rowId) {
                    $("#memberteamdlg").dialog({
                        title: name + '-上级信息',
                        closed: false,
                        width: 940,
                        height: 560,
                        cache: false,
                        href: '/admin/member/upper?id=' + rowId + '&name=' + name,
                        modal: true,
                        buttons: [{
                            text: '关闭',
                            iconCls: 'icon-no',
                            handler: function () {
                                $("#memberteamdlg").dialog('close');
                            }
                        }]
                    });
                } else {
                    $.messager.alert('提示', '请先选择要查看的记录！', 'warning');
                }
            },
            changeParent(){
                $("#memberrewardeditDlg").dialog({
                    title: '更新推荐人',
                    closed: false,
                    width: 740,
                    height: 540,
                    cache: false,
                    href: '/admin/member/list?curr=' + memberrewardeditVm.params.parent_member_id + '&id=' + memberrewardeditVm.params.id,
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'memberlistsubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#memberrewardeditDlg").dialog('close');
                        }
                    }]
                });
            },
            cleanParent(){
                $.messager.confirm('提示', '确定清除推荐人吗？此操作不可逆!', function (r) {
                    if (r) {
                        $.messager.progress();
                        $.post('/admin/member/cleanParent', {id: memberrewardeditVm.params.id}, function (data) {
                            $.messager.progress('close');
                            if (parseInt(data.ret) === 0) {
                                $.messager.show({
                                    title: '提示',
                                    msg: data.msg,
                                    timeout: 3000,
                                    showType: 'slide'
                                });
                                memberrewardeditVm.params.parent_member_id = 0;
                            } else {
                                $.messager.alert('提示', data.msg, 'warning');
                            }
                        }, 'json');
                    }
                });
            },
            setGudong(){
                $.messager.prompt('设置为股东', '请输入股东设置备注.', function (r) {
                    if (r) {
                        $.messager.progress();
                        $.post('/admin/member/setgudong', {gudong_id: memberrewardeditVm.params.id, remark: r}, function (data) {
                            $.messager.progress('close');
                            if (parseInt(data.ret) === 0) {
                                $.messager.show({
                                    title: '提示',
                                    msg: data.msg,
                                    timeout: 3000,
                                    showType: 'slide'
                                });
                                memberrewardeditVm.params.gudong = data.data;
                            } else {
                                $.messager.alert('提示', data.msg, 'warning');
                            }
                        }, 'json');
                    }
                });
            },
            setTuike(){
                $("#memberrewardeditDlg").dialog({
                    title: '设置推客',
                    closed: false,
                    width: 540,
                    height: 540,
                    cache: false,
                    href: '/admin/member/tuikeLevel?id=' + memberrewardeditVm.params.id,
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'settuikesubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#memberrewardeditDlg").dialog('close');
                        }
                    }]
                });
            },
            setTwostage(){
                $("#memberrewardeditDlg").dialog({
                    title: '设置推广大使',
                    closed: false,
                    width: 540,
                    height: 540,
                    cache: false,
                    href: '/admin/member/twostagelevel?id=' + memberrewardeditVm.params.id,
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'settwostagesubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#memberrewardeditDlg").dialog('close');
                        }
                    }]
                });
            },
            setQudai(){
                $("#memberrewardeditDlg").dialog({
                    title: '设置区域代理商',
                    closed: false,
                    width: 540,
                    height: 540,
                    cache: false,
                    href: '/admin/member/qudaiLevel?id=' + memberrewardeditVm.params.id,
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'qudailevelsubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#memberrewardeditDlg").dialog('close');
                        }
                    }]
                });
            },
            recharge(mode){
                let title = (mode==='money') ? '充值余额' : '充值积分';
                $("#memberrewardeditDlg").dialog({
                    title: title,
                    closed: false,
                    width: 640,
                    height: 320,
                    cache: false,
                    href: '/admin/member/recharge?mode=' + mode + '&id=' + memberrewardeditVm.params.id,
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'memberrechargesubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#memberrewardeditDlg").dialog('close');
                        }
                    }]
                });
            },
            changeLevel(){
                $("#memberrewardeditDlg").dialog({
                    title: '更新等级',
                    closed: false,
                    width: 540,
                    height: 540,
                    cache: false,
                    href: '/admin/member/level?curr=' + memberrewardeditVm.params.level + '&id=' + memberrewardeditVm.params.id,
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'memberlevelsubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#memberrewardeditDlg").dialog('close');
                        }
                    }]
                });
            },
            submit: function () {
                memberrewardeditVm.params.birthday = $('.memberedit-birthday').val();
                let act = this.params.id>0 ? 'edit' : 'add';
                $.post('/admin/member/' + act, memberrewardeditVm.params, function (data) {
                    if (data.ret === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        $('#<?php echo $uniqid;?>').form('clear');
                        $("#rewarddlg").dialog('close');
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            }
        }
    });
    $(function () {
        $('#membersubmit').click(function (data) {
            memberrewardeditVm.submit();
        });
    });
</script>
